<template>  
    <div>
        <el-row>
         <el-col :xs="2" :sm="2" :md="5" :lg="5">&nbsp;</el-col>
          <el-col class="container" :xs="20" :sm="20" :md="14" :lg="14">
         <span style="font-size:30px;margin-top:60px;">消息中心</span>
         <el-row style="margin:50px;">
           <el-col :span="24"><span style="font-size:25px;" v-if="messageList.length == 0">暂无消息</span>
</el-col>
         </el-row>
         <el-row v-for="m in messageList" class="block" v-show="messageList.length>0"><span style="font-size:13px;color:#606266;float:right;">{{m.createTime}}</span>
         <div class="messageAvatar"><el-avatar :size="50" :src="m.user.headPic"></el-avatar>{{m.user.userName}}&nbsp;{{m.opType}}&nbsp;了你</div> 
         </el-row>
          </el-col>
          <el-col :xs="2" :sm="2" :md="5" :lg="5">&nbsp;</el-col>
        </el-row>
    </div>  
</template>
<script>
export default {
    name:'Message',
    data() {
      return {
          messageList:''
      };
    },
    mounted(){
         var that = this;
 that.$axios.post('share/clearMessage',{userId:that.$session.get('USERID')}).then(function(res){
               if(res.data.code == 200){
                    that.$message({
                   message: '消息已读成功',
                   type: 'success'
        });
               }     
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
    that.$axios.post('share/getMessage',{userId:that.$session.get('USERID')}).then(function(res){
               if(res.data.code == 200){
                 that.messageList = res.data.body;
               }
              
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
},
    methods: {
         
      
  }
}
</script>
<style scoped>
.container{
    background-color:#FFF;
}
.block{
    font-size:20px;
    padding:10px;
    margin:20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.messageAvatar{
    float:left;
}
.commentText{
    padding:10px;
    font-size:16px;
    line-height:30px;
    height:30px;
    float:right;
}
.area{
    margin-left:30px;
    background-color:#DCDFE6;
}
</style>